<template>
  <div
    class="address-outer"
    v-if="isShow">
    <div
      class="address-box"
      :style="`position:${props.isShow ? 'relative' : ''}`">
      <div
        class="x"
        v-if="props.isShow"
        @click="close">
        X
      </div>
      <div class="edit-address">
        <AddressSelect
          ref="addressSelect"
          :changeIsShow="changeIsShow"></AddressSelect>
        <div
          class="address-box2"
          v-show="
            !addressSelect?.showAddress && addressStore.addressList?.length == 0
          ">
          <div class="title">我的收货地址</div>
          <div
            class="address-list"
            v-if="appStore.token">
            <div class="con">
              <ul class="clearfix">
                <li
                  v-for="address of addressStore.userAddressList"
                  :key="address.address_id"
                  @click="addressSelect?.selectAddress(address)">
                  <div class="address-title">
                    <span>{{ address.address_name }}</span>
                    <span>{{ address.province_name }}</span>
                  </div>
                  <div class="address-desc">
                    {{
                      `${address.province_name} ${address.city_name} ${address.county_name} ${address.way_name}`
                    }}
                  </div>
                </li>
              </ul>
              <div class="address-page">
                <i @click="leftPage">&lt;</i>
                <span>{{ currentPage }}</span>
                /
                {{ addressStore.addressPage ? addressStore.addressPage : 1 }}
                <i @click="rightPage">&gt;</i>
              </div>
            </div>
          </div>
          <div
            class="no-login"
            v-if="!appStore.token">
            现在
            <RouterLink to="/login">登录</RouterLink>
            ，可根据收货地址快速定位
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import useStore from '@/store'
import AddressSelect from './addressSelect/index.vue'
const { addressStore, userStore, appStore } = useStore()
const props = defineProps({
  isShow: Boolean,
  changeAddressShow: Function
})
const isShow = ref<boolean>(props.isShow != undefined ? props.isShow : false)
const changeIsShow = (flag: boolean) => {
  isShow.value = flag
}
const close = () => {
  changeIsShow(false)
  if (props.changeAddressShow) props.changeAddressShow()
}
defineExpose({
  changeIsShow,
  close
})

// 地址选择器
const addressSelect = ref<InstanceType<typeof AddressSelect>>()

// 换页功能
const currentPage = ref<number>(1)
const leftPage = () => {
  if (currentPage.value > 1) currentPage.value -= 1
  getAddressPage()
}
const rightPage = () => {
  if (currentPage.value < addressStore.addressPage) currentPage.value += 1
  getAddressPage()
}
const getAddressPage = () => {
  if (userStore.userInfo)
    addressStore.searchAddressListByUserId(
      userStore.userInfo.user_id,
      currentPage.value
    )
}
onMounted(() => {
  getAddressPage()
})
</script>

<style lang="less" scoped>
.gray {
  color: #757575;
}
.mi {
  color: #ff6900;
}
.address-outer {
  cursor: auto;
  .address-box {
    position: absolute;
    padding: 42px 20px 0 20px;
    top: 28px;
    right: 0;
    background: #fff;
    z-index: 99;
    width: 582px;
    border: 1px solid #e3e3e3;
    box-shadow: 0 6px 12px 0 rgb(0 0 0 / 15%);
    margin: 0;
    .x {
      cursor: pointer;
      position: absolute;
      top: 10px;
      right: 20px;
      &:hover {
        color: #ff6700;
      }
    }
    .edit-address {
      min-height: 350px;
      .address-box2 {
        margin: 0 20px;
        .title {
          color: #b0b0b0;
          font-size: 16px;
          margin-bottom: 10px;
        }
        .address-list {
          .con {
            ul {
              li {
                float: left;
                width: 50%;
                padding: 14px 0;
                line-height: 20px;
                cursor: pointer;
                transition: all 0.3s;
                list-style: none;
                box-sizing: border-box;
                &:hover {
                  background-color: #f5f5f5;
                }
                .address-title {
                  margin: 0 14px;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  span {
                    margin-right: 6px;
                  }
                }
                .address-desc {
                  font-size: 12px;
                  color: #b0b0b0;
                  margin: 0 14px;
                }
              }
            }
            .address-page {
              text-align: center;
              margin-top: 10px;
              i {
                margin: 0 14px;
                cursor: pointer;
              }
              span {
                color: #ff6700;
              }
            }
          }
        }
        .no-login {
          margin: 20px 0;
          text-align: center;
          color: #757575;
          a {
            color: #ff6700;
            display: inline-block;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
